<template>
  <div>
    <el-card style="width: 65%;margin: 20px auto;">
      <el-input placeholder="请输入关键词" v-model="InPut" style="width: 30%" clearable>
      </el-input>
      <el-button icon="el-icon-search" type="info" plain @click="search()">搜索</el-button>
      <div class="manage" style="float: right;">
        <el-button plain icon="el-icon-remove" @click="GetINall()">进入</el-button>
        <el-button plain type="danger" icon="el-icon-delete" @click="OutONall()">出去</el-button>
      </div>
    </el-card>

    <el-card style="width: 90%;margin: 20px auto;">
      <el-table :data="filterData" style="width: 100%" max-height="320" @select="handleSelectionChange"
        @select-all="handleSelectAll">
        <el-table-column fixed="left" label="全选" width="50" type="selection">
        </el-table-column>
        <el-table-column fixed prop="id" label="工号">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="GetIN(scope.row)">进来</el-button>
            <el-button @click="OutON(scope.row)" type="text" size="small" style="color: red">出去</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
import Topbar from "@/components/Topbar.vue";
export default {
  methods: {
    handleSelectAll(value) {

      for (this.i = 0; this.i < value.length; this.i++) {
        let tempAtable = {}; // 使用let关键字创建新的作用域

        tempAtable.id = value[this.i].id;
        tempAtable.name = value[this.i].name;
        this.atable.push(tempAtable);
      }
      console.log(this.atable);

      /**
       for
       {
        console.log(636);
this.checked.push(value[this.checkednum].id);
        this.checkednum++;
      }不理解为什么不运行呢 length拼写错误，legend
       value.forEach(item => {
        // 将选中行添加到checked数组中
        this.Atable.id=item.id;

        this.Atable.name=item.name;
        this.atable.push(this.Atable);

      }这一段代码是不是有问题，我输出发现atable里面全是最后一个数据

       是的，你遇到了常见的 JavaScript 中闭包问题。在循环中使用 this.Atable 时，实际上是在共享同一个对象实例，
       你每次循环都在修改同一个 this.Atable 对象，然后将它添加到 atable 数组中。这导致 atable 中实际上包含的是多个对同一个对象的引用。

       为了解决这个问题，你需要在循环内部创建新的 this.Atable 对象，而不是重复使用同一个对象。
       */

    },

    handleSelectionChange(value) {


      console.log("aaa");
      console.log(value.length);
      console.log(this.atable);

      let tempAtable = {}; // 使用let关键字创建新的作用域

      tempAtable.id = value[this.i].id;
      tempAtable.name = value[this.i].name;
      this.atable.push(tempAtable);





      this.i++;


    },
    GetINall() {


      for (let i = 0; i < this.atable.length; i++) {
        this.atable[i].states = "进入555";
        console.log(this.atable);
        console.log(6523);
        this.$axios.post('http://localhost:8090/atable1/add', this.atable[i], {
          headers: {
            'Content-Type': 'application/json',
          }
        })
          .then(response => {

            console.log(this.worker);
            // 请求返回数据后，调用 filterData 方法进行数据过滤

          })
          .catch(error => {
            console.error(error);
            // 处理出错情况，例如显示错误信息等等
          });
      }
    },
    OutONall() {

      for (let i = 0; i < this.atable.length; i++) {

        this.atable[i].states = "出去12";
        this.$axios.post('http://localhost:8090/atable1/add', this.atable[i], {
          headers: {
            'Content-Type': 'application/json',
          }
        })
          .then(response => {
            this.worker = response.data;
            console.log(this.worker);
            // 请求返回数据后，调用 filterData 方法进行数据过滤

          })
          .catch(error => {
            console.error(error);
            // 处理出错情况，例如显示错误信息等等
          });
      }
    },

    ion(worker) {
      this.Atable.id = worker.id;

      this.Atable.name = worker.name;
    },
    GetIN(worker) {
      this.ion(worker);
      this.Atable.states = "进入";
      this.$axios.post('http://localhost:8090/atable1/add', this.Atable, {
        headers: {
          'Content-Type': 'application/json',
        }
      })
        .then(response => {
          this.worker = response.data;
          console.log(this.worker);
          // 请求返回数据后，调用 filterData 方法进行数据过滤

        })
        .catch(error => {
          console.error(error);
          // 处理出错情况，例如显示错误信息等等
        });
    },
    OutON(worker) {
      this.ion(worker);
      this.Atable.states = "出去555";

      this.$axios.post('http://localhost:8090/atable1/add', this.Atable, {
        headers: {
          'Content-Type': 'application/json',
        }
      })
        .then(response => {
          this.worker = response.data;
          console.log(this.worker);
          // 请求返回数据后，调用 filterData 方法进行数据过滤

        })
        .catch(error => {
          console.error(error);
          // 处理出错情况，例如显示错误信息等等
        });
    },


    search() {
      this.searchText = this.InPut;

    },

  },
  name: "role1Inone",
  components: { Topbar },
  mounted() {

    this.$axios.post('http://localhost:8090/user/get', null, {
      headers: {
        'Content-Type': 'application/json',
      }
    })
      .then(response => {
        this.worker = response.data;
        console.log(this.worker);
        // 请求返回数据后，调用 filterData 方法进行数据过滤

      })
      .catch(error => {
        console.error(error);
        // 处理出错情况，例如显示错误信息等等
      });

  },
  data() {
    return {
      u: '',
      i: 0,
      searchText: '',

      checkednum: 0,

      isIndeterminate: true,
      Name: '',
      InPut: '',
      dialogVisible: false,
      newWorker: {
        id: '',
        name: '',
        phone: '',
        company: '',
        sex: '',
        role: '',
        date: '',
      },
      Atable: {
        id: '',
        name: '',
        states: '',
        workhour: '',
        time: '',
      },
      atable: [],

      worker: [{
        id: '',
        name: '',
        phone: '',
        company: '',
        sex: '',
        role: '',
        date: '',
      }]

    }
  },
  computed: {
    filterData() {
      const searchText = this.searchText.trim().toLowerCase();//大写转小写
      if (!searchText) {
        return this.worker;
      }
      else {
        return this.worker.filter((item) => {

          return (
            item.date.toLowerCase().includes(searchText) ||
            item.id.toLowerCase().includes(searchText) ||
            item.name.toLowerCase().includes(searchText)
          );

        })
      }
    },
  },
}

</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  margin-left: 200px;
  height: 500px;
  width: 40%;
}

.content {
  width: 80%;
  text-align: center;
  align-content: center
}
</style>